<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <input type="text" placeholder='在 input 框输入文字, 且只能输入一个字

 返回他的 "拼音" , "部首", "笔画"' style="width: 500px;">
  <button>qignqiu1</button>

  <script>
    var btn = document.querySelector('button')
    btn.onclick = () => {
      var inp = document.querySelector('input')
      var pval = inp.value
      var xhr = new XMLHttpRequest()
      xhr.open('GET', `https://apis.tianapi.com/xhzd/index?key=f91ff265d7a7bbed6de9d34babf5abcf&word=${pval}`)
      xhr.send()
      xhr.onreadystatechange = function () {

        
        if (xhr.readyState == 4 && xhr.status == 200) {
          var obj = JSON.parse(xhr.responseText)
          console.log(obj)
          alert(pval + '  的拼音是：' + obj.result.list[0].py + '  部首是：' + obj.result.list[0].bushou + '  笔画是：' + obj.result.list[0].bihua)
        }
      }
      inp.value = ''
    }
  </script>
</body>

</html>